/* 
1.Suspense 让你的组件在渲染之前进行等待，并在等待时显示fallback的内容
2.Suspense内的组件子树比组件树的其他部分拥有更低的优先级
3.执行流程
    在render函数中我们可以使用异步请求数据
    react会从我们缓存中读取这个缓存
    如果没有缓存，那么会抛出一个promise异常
    当这个promise完成后(比发请求数据完成)，react会继续回到原来的render中，把数据render出来
4.完全同步写法，没有任何异步callback之类的东西
5.ErrorBoundary(错误边界)是一个组件，该组件会捕获到渲染期间(render)子组件发生的错误，并有能力阻止错误继续传播 
*/

import React, { Component, Suspense } from 'react'
import ErrorBoundary from './components/ErrorBoundary';
import { fetchUser } from './fakeApi';
import { wrapPromise } from './utils';


const userPromise = fetchUser('1');
const userResource = wrapPromise(userPromise);
class SuspensePage extends Component {
  render() {
    return (
      <Suspense fallback={<h3>Loading User......</h3>}>
        <ErrorBoundary>
          <User />
        </ErrorBoundary>
      </Suspense >
    );
  }
}
function User() {
  const user = userResource.read();
  return <div>{user.id}:{user.name}</div>
}

export default SuspensePage;